<template>
  <canvas :hidpi="true" :style="`width:${width}px;height:${height}px;`" :width="width" :height="height"
          class="poster-canvas" disable-scroll="true" canvas-id="mui-draw-poster-canvas"
  ></canvas>
</template>

<script>
import DrawPoster from '../../lib/draw-poster/index.js'

let poster = null
export default {
  props: {
    renderClassName: {
      type: String,
      default: 'poster'
    },
    pageVm: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      width: 0,
      height: 0
    }
  },
  methods: {
    init(cb) {
      poster = new DrawPoster({
        pageThis: this.pageVm,
        canvasThis: this,
        canvasId: 'mui-draw-poster-canvas',
        renderClassName: this.renderClassName,
        onLayout: (layoutTree) => {
          const { root: { rect: { w, h } } } = layoutTree
          this.height = h
          this.width = w
        },
        onRendered: () => {
          cb && cb()
        }
      })
    },
    save(conf = {}) {
      return new Promise(resolve => {
        this.init(async () => {
          resolve(poster.save(conf))
        })
      })
    },
    getCanvasTempPath() {
      return new Promise(resolve => {
        this.init(async () => {
          resolve(poster.getBase64Img())
        })
      })
    }
  }
}
</script>

<style>
.poster-canvas {
  margin-top: 10px;
  position: fixed;
  z-index: -999999 !important;
  opacity: 0;
  top: -5000rpx;
}
</style>
